<script setup lang='ts'>

import { useRouter } from 'vue-router';
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const route = useRoute()
const activeIndex = ref('')
// 根据当前路由路径设置 activeIndex
const updateActiveIndex = (path) => {
    switch (path) {
        case '/admin':
            activeIndex.value = '1'
            break
        case '/admin/birdMgt':
            activeIndex.value = '2'
            break
        case '/admin/historyMgt':
            activeIndex.value = '3'
            break
        case '/admin/collectionMgt':
            activeIndex.value = '4'
            break
        case '/admin/log':
            activeIndex.value = '5'
            break
        case '/admin/dataCollect':
            activeIndex.value = '6'
            break
        case '/admin/identificationAdmin':
            activeIndex.value = '7'
            break
        case '/admin/uploadModel':
            activeIndex.value = '8'
            break
        default:
            activeIndex.value = ''
            break
    }
}

//初始化
// updateActiveIndex(route.path)
// console.log("route.path:" +  route.path)
// console.log("activeIndex.value:" +  activeIndex.value)

// 监听路由变化并更新 activeIndex
watch(route, (newRoute) => {
    updateActiveIndex(newRoute.path)
},
{immediate: true}
)


const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const router = useRouter()

const toUserMgt = () => {
    router.push('/admin')
    // activeIndex.value = '1'
}

const toLog = () => {
    router.push('/admin/log')
    // activeIndex.value = '5'
}

const toDataProcess = () => {
    router.push('/admin/dataProcess')
}

const toDataCollect = () => {
    router.push('/admin/dataCollect')
    // activeIndex.value = '6'
}

const toBirdMgt = () => {
    router.push('/admin/birdMgt')
    // activeIndex.value = '2'
}

const toHistoryMgt = () => {
    router.push('/admin/historyMgt')
    // activeIndex.value = '3'
}

const toCollectionMgt = () => {
    router.push('/admin/collectionMgt')
    // activeIndex.value = '4'
}

const toIdentification = () => {
    router.push('/admin/identificationAdmin')
    // activeIndex.value = '7'
}

const toUploadModel = () => {
    router.push('/admin/uploadModel')
    // activeIndex.value = '8'
}


</script>

<!-- link test -->
<template>
    <el-container class="container">
        <el-header>
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="0">
                    <img class="logo" src="@/assets/logo.png" alt="logo" />
                </el-menu-item>
                <div class="flex-grow" />
                <el-menu-item index="1">个人中心</el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <el-row class="tac">
                <el-col :span="6">
                    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                        <el-menu-item index="1" @click="toUserMgt">
                            <el-icon><UserFilled /></el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="toBirdMgt">
                            <el-icon><icon-menu /></el-icon>
                            <span>鸟类信息管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="toHistoryMgt">
                            <el-icon><Clock /></el-icon>
                            <span>历史记录管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="toCollectionMgt">
                            <el-icon><Star /></el-icon>
                            <span>收藏管理</span>
                        </el-menu-item>
                        <el-menu-item index="5" @click="toLog">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>系统日志</span>
                        </el-menu-item>
                        <el-menu-item index="6" @click="toDataCollect">
                            <el-icon><TrendCharts /></el-icon>
                            <!-- collection的这个图标和collection.vue的名字冲突了，由于自动导入，即使没有手动导入也会冲突 -->
                            <!-- <el-icon><Collection /></el-icon> -->
                            <span>数据采集及处理</span>
                        </el-menu-item>
                        <!-- <el-menu-item index="7" @click="toDataProcess">
                            <el-icon><TrendCharts /></el-icon>
                            <span>数据处理</span>
                        </el-menu-item> -->
                        <el-menu-item index="7" @click="toIdentification">
                            <el-icon><Aim /></el-icon>
                            <span>鸟类分类（识别）</span>
                        </el-menu-item>
                        <el-menu-item index="8" @click="toUploadModel">
                            <el-icon><UploadFilled /></el-icon>
                            <span>模型上传</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="18">
                    <router-view />
                </el-col>
            </el-row>
        </el-main>
        <el-footer class="footer">
            鸟鸣声识别 . All Rights Reserved By ********
        </el-footer>
    </el-container>


</template>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.container {
    height: 100vh;
}

.main {
    background-color: #fff;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
    padding: 0;
}

.footer {
    background-color: gray;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.logo {
    height: 90%;
    width: 90%;
}
</style>